// import Constants from 'expo-constants';
import { useState } from 'react';
import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import Swiper from 'react-native-swiper';
const App = () => {
  const [inputText, setInputText] = useState('Hello React-Native');
  return (
    <ScrollView style={styles.container}>
      {/* 轮播组件 */}
      <Swiper
        style={styles.wrapper}
        showsButtons={true}
        autoplay={true}
        autoplayTimeout={1}
        removeClippedSubviews={false} // 关闭视图裁剪
        paginationStyle={{
          bottom: 10, // 控制指示器位置
        }}
        dot={
          <View
            style={{
              backgroundColor: 'rgba(0,0,0,0.2)',
              width: 8,
              height: 6,
              borderRadius: 0, // 设置为方形
              margin: 4,
            }}
          />
        }
        activeDot={
          <View
            style={{
              backgroundColor: '#FF3000',
              width: 30,
              height: 6,
              borderRadius: 0, // 设置选中时的方形
              margin: 4,
            }}
          />
        }
      >
        <View>
          <Image
            style={styles.img}
            source={require('@/assets/img/1.jpg')}
          ></Image>
        </View>
        <View>
          <Image
            style={styles.img}
            source={require('@/assets/img/2.jpg')}
          ></Image>
        </View>
        <View>
          <Image
            style={styles.img}
            source={require('@/assets/img/3.jpg')}
          ></Image>
        </View>
      </Swiper>
      {/* 输入框组件 */}
      <TextInput
        style={styles.input}
        value={inputText}
        onChangeText={setInputText}
      ></TextInput>
      <TextInput>React-Native</TextInput>
      <Text>Hello React-Native</Text>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {},
  img: {
    width: '100%',
    height: '100%',
  },
  wrapper: {
    height: 200,
  },
  input: {
    borderWidth: 1,
    padding: 8,
  },
});

export default App;
